<template>
  <div class="menu-wrap">
    <ZuiFieldGroup class="group" title="表单组件">
      <ZuiField label="Input" @click="$router.push('/input')" />
      <ZuiField label="Button" @click="$router.push('/button')" />
      <ZuiField label="Selector" @click="$router.push('/selector')" />
      <ZuiField label="PopupSelector" @click="$router.push('/popupSelector')" />
      <ZuiField label="ImageUploader" @click="$router.push('/imageUploader')" />
      <ZuiField label="Attachment" @click="$router.push('/attachment')" />
      <ZuiField label="Month" @click="$router.push('/month')" />
      <ZuiField label="Switch" @click="$router.push('/switch')" />
      <ZuiField label="SortableInput" @click="$router.push('/sortableInput')" />
    </ZuiFieldGroup>
    <ZuiFieldGroup class="group" title="展示组件">
      <ZuiField label="FieldGroup" @click="$router.push('/fieldGroup')" />
      <ZuiField label="Placeholder" @click="$router.push('/placeholder')" />
      <ZuiField label="Popup" @click="$router.push('/popup')" />
      <ZuiField label="RedDot" @click="$router.push('/redDot')" />
    </ZuiFieldGroup>
    <ZuiFieldGroup class="group" title="反馈组件">
      <ZuiField label="Loading" @click="$router.push('/loading')" />
    </ZuiFieldGroup>
    <ZuiFieldGroup class="group" title="业务组件">
      <ZuiField label="LicensePlateInput" @click="$router.push('/licensePlateInput')" />
      <ZuiField label="UserPicker" @click="$router.push('/userPicker')" />
    </ZuiFieldGroup>
  </div>
</template>

<script setup>
const emit = defineEmits(['select'])
</script>

<style lang="scss" scoped>
.menu-wrap {
  padding: 16px 0;
  .group {
    &:not(:first-child) {
      margin-top: 16px;
    }
  }
}
</style>
